<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        .wrapper {
            width: 500px;
            height: 350px;
            background-color: skyblue;
            margin: auto;
            margin-top: 5%;
            border-radius: 45px;

        }
        #nameDisplay{
            font-size: 2em; 
            text-align: center; 
            margin-top: 20px;
            
        }
        .wrapper .btn {
            width: 150px;
            position: relative;
            top: 65%;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }
        .btn button{
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="wrapper">

            <div class="btn">
                <button id="start">开始</button>
                <button id="stop">停止</button>
            </div>
            <div id="nameDisplay">？？？</div>

            
    </div>

    <script>
        // 声明一组数组，用来选取随机名字
        var names = ['张三', '李四', '王五', '赵六', '钱七'];
        let startBtnEle = document.getElementById("start");
        let stopBtnEle = document.getElementById("stop");
        let nameDisplayEle = document.getElementById("nameDisplay");
        let intervalId;
        let currentName; // 记录当前显示的名字

        // 随机抽取名字
        function randomName() {
            let index = Math.floor(Math.random() * names.length);
            return names[index];
        }

        function startRollingNames() {
            // 禁用开始按钮
            startBtnEle.disabled = true;
            // 启动定时器
            intervalId = setInterval(function() {
                currentName = randomName(); // 记录当前随机的名字
                nameDisplayEle.innerHTML = currentName;
            }, 100);
        }

        function stopRollingNames() {
            // 清除定时器
            clearInterval(intervalId);
            // 显示最后一次随机选择的名字
            nameDisplayEle.innerHTML = currentName;
            // 启用开始按钮
            startBtnEle.disabled = false;
        }

        // 添加点击事件监听器
        startBtnEle.addEventListener('click', startRollingNames);
        stopBtnEle.addEventListener('click', stopRollingNames);
    </script>


    </script>
    
</body>
</html>